<template>
    <div class="swiper-container visual_swiper2 visual_chart">
        <div class="swiper-wrapper">
            <div class="swiper-slide"  id="main4"></div>
            <div class="swiper-slide"  id="main41"></div>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    export default {
        name: "Main4",
        data(){
            return{
                option:{
                    "title": {
                        "text": "标题",
                        "left": "center",
                        "y": "10",
                        "textStyle": {
                            "color": "#fff"
                        }
                    },

                    "grid": {
                        "left": 30,
                        "top": 0,
                        "bottom": 10
                    },
                    "tooltip": {
                        "trigger": "item",
                        "textStyle": {
                            "fontSize": 12
                        },
                        "formatter": "{b0}:{c0}"
                    },
                    "xAxis": {
                        "max": 100,
                        "splitLine": {
                            "show": false
                        },
                        "axisLine": {
                            "show": false
                        },
                        "axisLabel": {
                            "show": false
                        },
                        "axisTick": {
                            "show": false
                        }
                    },
                    "yAxis": [
                        {
                            "type": "category",
                            "inverse": false,
                            "data": [
                                "朔州",
                                "大同",
                                "运城",
                                "忻州",
                                "临汾",
                            ],
                            "axisLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLabel": {
                                "margin": -4,
                                "textStyle": {
                                    "color": "#fff",
                                    "fontSize": 16.25
                                }
                            }
                        },

                    ],
                    "series": [
                        {
                            "type": "pictorialBar",
                            "symbol": "image://",
                            "symbolRepeat": "fixed",
                            "symbolMargin": "5%",
                            "symbolClip": true,
                            "symbolSize": 22.5,
                            "symbolPosition": "start",
                            "symbolOffset": [
                                20,
                                0
                            ],
                            "symbolBoundingData": 300,
                            "data": [
                                51,
                                32,
                                82,
                                42,
                                81,

                            ],
                            "z": 10
                        },
                        {
                            "type": "pictorialBar",
                            "itemStyle": {
                                "normal": {
                                    "opacity": 0.3
                                }
                            },
                            "label": {
                                "normal": {
                                    "show": false
                                }
                            },
                            "animationDuration": 0,
                            "symbolRepeat": "fixed",
                            "symbolMargin": "5%",
                            "symbol": "image://",
                            "symbolSize": 22.5,
                            "symbolBoundingData": 300,
                            "symbolPosition": "start",
                            "symbolOffset": [
                                20,
                                0
                            ],
                            "data": [
                                51,
                                32,
                                82,
                                42,
                                81,

                            ],
                            "z": 5
                        }
                    ]
                }
            }
        },
        mounted() {
            this.drawLine()
        },
        methods:{
            drawLine(){
                let main4 = this.$echarts.init(document.getElementById('main4'))
                let main41 = this.$echarts.init(document.getElementById('main41'))
                // console.log(this.$data.option.series.data)
                main4.setOption(this.$data.option)
                main41.setOption(this.$data.option)
                var mySwiper2 = new Swiper('.visual_swiper2', {
                    autoplay: true,//可选选项，自动滑动
                    direction : 'vertical',//可选选项，滑动方向
                    speed:2000,//可选选项，滑动速度
                })
            }
        }
    }
</script>

<style scoped>

</style>